<template>
    <div class="rootview">
        <div class="titleview">
            <img class="zsimg" src="@/assets/images/titlezs.png" alt="">
            <img class="titicon" src="@/assets/images/titleicon.png" alt="">
            <img class="titleyx" src="@/assets/images/titleyx.png" alt="">
        </div>
        <div class="bottomview"></div>
        <div class="reloadline"></div>
    </div>
</template>

<script>
export default {
    // 组件名称
    name: 'defWidet',
    // 组件参数 接收来自父组件的数据
    props: {
        item: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
        return {}
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {},
    created() {
    },
    mounted() {

        // // 获取元素
        // var element = document.querySelector('.reloadline');

        // // 添加动画
        // function addAnimation() {
        //     element.classList.add('slideIn');
        // }

        // // 移除动画
        // function removeAnimation() {
        //     element.classList.remove('slideIn');
        // }

    },
}
</script> 

<style scoped lang="scss">
.rootview {
    position: relative;
    width: 100%;
    height: 100%;
    // background: linear-gradient(180deg, rgba(0, 149, 255, 0.2) 10%, rgba(0, 148, 255, 0) 100%);
    overflow: hidden;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(0, 148, 255, 0), rgba(0, 148, 255, 1)) 1 1;
}

.toptieleview {
    width: 100%;
    height: 44px;
    background: #fff;
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(0, 148, 255, 0), rgba(0, 148, 255, 1)) 1 1;
}

.bottomview {
    width: 100%;
    height: calc(100% - 44px);
    background: rgba(1, 35, 85, .3);

    border: 1px solid;

}

.titleview {
    width: 100%;
    height: 44px;
    background: #fff;
    border: 1px solid rgba(0, 148, 255, 1);
    //从左到右渐变色
    background: -webkit-linear-gradient(left, rgba(0, 148, 255, 1), rgba(0, 148, 255, 0));
    position: relative;

    .zsimg {
        position: absolute;
        top: 0;
        left: 0;
        width: 9px;
        height: 9px;
    }

    .titicon {
        position: absolute;
        top: 11px;
        left: 11px;
        height: 22px;
    }

    .titleyx {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 3.5px;
    }
}


// 动画 从上到下
.reloadline {
    position: absolute;
    top: 44px;
    left: 0px;
    width: 100%;
    height: 1px;
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(0, 148, 255, 0), rgba(0, 148, 255, 1), rgba(0, 148, 255, 0)) 1 1;

    // 动画 从上到下
    animation: slideIn 5s ease-out infinite;

    @keyframes slideIn {
        0% {
            top: 44px;
        }

        100% {
            top: 100%;
        }
    }
}
</style>
